<template>
  <div class="mobile-login">
    <div class="login-header">
      <img
        src="@/assets/6989d94d0c54ab6b8bcce0fd6f845ed.png"
        alt="影厅票务网Logo"
        class="login-logo"
      />
      <h2 class="login-title">影厅票务网</h2>
    </div>

    <div class="login-form">
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginFormRef"
        label-position="top"
      >
        <el-form-item prop="username" label="用户名">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            :prefix-icon="User"
            clearable
          />
        </el-form-item>

        <el-form-item prop="password" label="密码">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            :prefix-icon="Lock"
            show-password
            clearable
          />
        </el-form-item>

        <div class="captcha-container" v-if="needCaptcha">
          <el-form-item prop="captcha" label="验证码">
            <div class="captcha-input-group">
              <el-input
                v-model="loginForm.captcha"
                placeholder="请输入验证码"
                :prefix-icon="Key"
                clearable
              />
              <img
                :src="captchaImg"
                alt="验证码"
                class="captcha-img"
                @click="getCaptcha"
              />
            </div>
          </el-form-item>
        </div>

        <el-form-item>
          <el-button
            type="primary"
            class="login-button"
            @click="login"
            :loading="loading"
          >
            登录
          </el-button>
        </el-form-item>

        <div class="login-options">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
          <span class="register-link" @click="goToRegister">注册账号</span>
        </div>
      </el-form>
    </div>

    <div class="login-footer">
      <p>© 2023 影厅票务网 移动版</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { User, Lock, Key } from '@element-plus/icons-vue'
import { CheckLogin, reqLogin } from '@/api/user'

const router = useRouter()
const loginFormRef = ref()
const loading = ref(false)
const rememberMe = ref(false)
const needCaptcha = ref(false)
const captchaImg = ref('')

// 登录表单
const loginForm = reactive({
  username: '',
  password: '',
  captcha: '',
})

// 表单验证规则
const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度应为3-20个字符', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度应为6-20个字符', trigger: 'blur' },
  ],
  captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
}

// 获取验证码
const getCaptcha = () => {
  // 这里应该调用获取验证码的API
  captchaImg.value = 'https://via.placeholder.com/100x40?text=1234'
}

// 登录方法
const login = async () => {
  if (!loginFormRef.value) return

  await loginFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      loading.value = true
      try {
        // 调用登录API
        const result: any = await reqLogin({
          login: loginForm.username,
          password: loginForm.password,
        })

        if (result.code === 200) {
          // 登录成功
          localStorage.setItem('TOKEN', result.data.token)
          localStorage.setItem('id', result.data.id)
          localStorage.setItem('name', result.data.name)
          if (rememberMe.value) {
            localStorage.setItem('REMEMBER_USER', loginForm.username)
          } else {
            localStorage.removeItem('REMEMBER_USER')
          }

          ElMessage.success('登录成功')
          router.push('/mobile')
        } else {
          // 登录失败
          ElMessage.error(result.message || '登录失败')
          // 如果需要验证码
          if (result.code === 401) {
            needCaptcha.value = true
            getCaptcha()
          }
        }
      } catch (error) {
        console.error('登录出错', error)
        ElMessage.error('登录失败，请稍后重试')
      } finally {
        loading.value = false
      }
    }
  })
}

// 跳转到注册页面
const goToRegister = () => {
  ElMessage.info('注册功能即将上线')
}

// 初始化
const initForm = () => {
  const rememberedUser = localStorage.getItem('REMEMBER_USER')
  if (rememberedUser) {
    loginForm.username = rememberedUser
    rememberMe.value = true
  }
}

initForm()
</script>

<style scoped lang="scss">
.mobile-login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding: 20px;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  margin-bottom: 30px;

  .login-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 15px;
  }

  .login-title {
    font-size: 24px;
    color: #ff6b6b;
    margin: 0;
  }
}

.login-form {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;

  .captcha-input-group {
    display: flex;
    align-items: center;
    gap: 10px;

    .el-input {
      flex: 1;
    }

    .captcha-img {
      height: 40px;
      border-radius: 4px;
      cursor: pointer;
    }
  }

  .login-button {
    width: 100%;
    height: 44px;
    font-size: 16px;
    background-color: #ff6b6b;
    border-color: #ff6b6b;

    &:hover,
    &:focus {
      background-color: #ff8585;
      border-color: #ff8585;
    }
  }

  .login-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;

    .register-link {
      color: #ff6b6b;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.login-footer {
  margin-top: auto;
  text-align: center;
  color: #909399;
  font-size: 12px;
  padding: 20px 0;
}
</style>